<template>
  <div class="detail-container">
    <!-- 质检明细区块 -->
    <div class="detail-section">
      <div class="section-header">质检明细</div>
      <div class="section-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">质检编号：</span>
              <span>{{ detail.QualityTestProcessCode || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">质检名称：</span>
              <span>{{ detail.QualityTestProcessName || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">批次号：</span>
              <span>{{ detail.RawProcessbatch || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">质检人：</span>
              <span>{{ detail.QualityTestProcessMen || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">质检日期：</span>
              <span>{{ detail.QualityTestProcessData || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">成品名称：</span>
              <span>{{ detail.Product_name || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">规格型号：</span>
              <span>{{ detail.Model || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">尺寸：</span>
              <span>{{ detail.Size || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 质检明细表数据 -->
    <div class="detail-section">
      <div class="section-header">质检明细表</div>
      <div class="section-content">
        <el-table
          :data="detailTableData"
          border
          style="width: 100%"
          size="small"
        >
          <el-table-column prop="TestDetailNum" label="质检数量" align="center"></el-table-column>
          <el-table-column prop="TestDetailNumOK" label="合格数量" align="center"></el-table-column>
          <el-table-column prop="TestDetailNumNo" label="不合格数量" align="center"></el-table-column>
          <el-table-column prop="Qualityinspector" label="质检人" align="center"></el-table-column>
          <el-table-column prop="TestDetailResult" label="质检结果" align="center">
            <template #default="scope">
              <span :style="{ color: getResultColor(scope.row.TestDetailResult) }">
                {{ scope.row.TestDetailResult || '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="Detailedremarks" label="备注" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 质检信息区块 -->
    <div class="detail-section">
      <div class="section-header">质检信息</div>
      <div class="section-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="detail-item">
              <span class="label">质检数量：</span>
              <span>{{ detail.TestDetailNum || '0' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="detail-item">
              <span class="label">合格量：</span>
              <span>{{ detail.TestDetailNumOK || '0' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="detail-item">
              <span class="label">不合格量：</span>
              <span>{{ detail.TestDetailNumNo || '0' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="detail-item">
              <span class="label">质检人：</span>
              <span>{{ detail.Qualityinspector || detail.QualityTestProcessMen || '-' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 15px;">
          <el-col :span="6">
            <div class="detail-item">
              <span class="label">质检结果：</span>
              <span>{{ detail.TestDetailResult || '-' }}</span>
            </div>
          </el-col>
    
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">备注：</span>
              <span>{{ detail.Detailedremarks || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 质检项目区块 -->
    <div class="detail-section" v-if="detail.TestItems && detail.TestItems.length > 0">
      <div class="section-header">质检项目</div>
      <div class="section-content">
        <el-table
          :data="detail.TestItems || []"
          border
          style="width: 100%"
          size="small"
        >
          <el-table-column type="selection" width="55" align="center">
            <template slot-scope="scope">
              <el-checkbox :value="scope.row.Selected" disabled></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="ItemName" label="质检项目名称" align="center"></el-table-column>
          <el-table-column prop="ItemCode" label="质检项目编号" align="center"></el-table-column>
          <el-table-column prop="TestTool" label="质检工具" align="center"></el-table-column>
          <el-table-column prop="TestMethod" label="质检方法" align="center"></el-table-column>
          <el-table-column prop="TestType" label="质检类型" align="center"></el-table-column>
          <el-table-column prop="StandardValue" label="标准值" align="center"></el-table-column>
          <el-table-column prop="UpperLimit" label="上差值" align="center"></el-table-column>
          <el-table-column prop="LowerLimit" label="下差值" align="center"></el-table-column>
          <el-table-column prop="TestStatus" label="质检状态" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 底部按钮区域 -->
    <div class="detail-footer">
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailProcess",
  props: {
    detail: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 计算属性，用于获取明细表数据
    detailTableData() {
      // 如果有detailItems数组，直接返回
      if (this.detail.detailItems && Array.isArray(this.detail.detailItems) && this.detail.detailItems.length > 0) {
        return this.detail.detailItems;
      }
      
      // 如果没有detailItems数组，但有单条明细数据，创建一个包含这条数据的数组
      if (this.detail.TestDetailNum || this.detail.TestDetailNumOK || this.detail.TestDetailNumNo || 
          this.detail.Qualityinspector || this.detail.TestDetailResult || this.detail.Detailedremarks) {
        return [{
          TestDetailNum: this.detail.TestDetailNum || 0,
          TestDetailNumOK: this.detail.TestDetailNumOK || 0,
          TestDetailNumNo: this.detail.TestDetailNumNo || 0,
          Qualityinspector: this.detail.Qualityinspector || this.detail.QualityTestProcessMen || '-',
          TestDetailResult: this.detail.TestDetailResult || '-',
          Detailedremarks: this.detail.Detailedremarks || '-'
        }];
      }
      
      // 默认返回空数组
      return [];
    }
  },
  mounted() {
    // 打印接收到的数据，便于调试
    console.log('DetailProcess组件接收到的数据:', this.detail);
    console.log('明细表数据:', this.detailTableData);
  },
  methods: {
    getResultColor(result) {
      if (result === '合格') {
        return 'green';
      } else if (result === '不合格') {
        return 'red';
      } else {
        return 'black';
      }
    },
    closeDialog() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped>
.detail-container {
  padding: 10px;
}

.detail-section {
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  margin-bottom: 20px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section-header {
  padding: 10px 15px;
  border-bottom: 1px solid #EBEEF5;
  background-color: #F5F7FA;
  font-weight: bold;
  font-size: 15px;
}

.section-content {
  padding: 15px;
}

.detail-item {
  margin-bottom: 10px;
  line-height: 22px;
}

.label {
  font-weight: bold;
  display: inline-block;
  min-width: 100px;
}

.image-container {
  width: 80px;
  height: 80px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
}

.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #c0c4cc;
}

.no-image i {
  font-size: 28px;
}

.detail-footer {
  text-align: center;
  margin-top: 20px;
}
</style>
